<template>
    <div>
        <cu-navbar>
            <block slot="content">商品订单</block>
        </cu-navbar>
        <view class="dhdd">
            <u-tabs
                active-color="#FF2E26" inactive-color='#888'
                :list="listsz" :is-scroll="false" :current="current" @change="change"></u-tabs>
            <view class="content">
                <view class="list" v-for="(item,index) in lists" :key="index">
                    <view class="top">
                        <view class="l">
                            订单号：{{item.order_sn}}
                        </view>
                        <view class="r">
                            {{item.status == 1 ?'待发货':(item.status == 2 ? '待收货':'已完成')}}
                        </view>
                    </view>
                    <view class="middle">
                        <view class="img_left">
                            <img :src="item.image" alt="">
                        </view>
                        <view class="middle_right">
                            <div class="good-name">{{ item.goods_name }}</div>
                            <div class="user-box">
                                <div class="username">{{ item.username }}</div>
                                <div class="user-tag">买家</div>
                            </div>
                            <div class="username">{{ item.phone }}</div>
                            <div class="useraddress">收货地址：{{ item.address }}</div>
                        </view>
                    </view>
                    <view class="bottom">
                        <div class="bottom-item">
                            <span>下单时间：{{ item.create_time }}</span>
                            <span>
                    兑换金额：¥<span class="red">{{ item.total }}</span>
                </span>
                        </div>
                        <div class="bottom-item">
                            <span>更新时间：{{ item.update_time }}</span>
                            <span>
                    订单类型：兑换
                </span>
                        </div>
                        <view class="but">
                            <view class="l">
                            </view>
                            <view class="r" v-if="item.status == 2" @click.stop="qrsh(item)">
                                确认收货
                            </view>
                        </view>
                
                    </view>
                </view>
            </view>
            <footer-page
                style="bottom: 0"
                :page="page"
                :pagesize="pagesize"
                :page-size="pageSize"
                :page-total="pageTotal"
                @pre="pagePre"
                @next="pageNext"
            ></footer-page>
            <u-popup v-model="show" mode="center">
                <view class="box_popup">
                    <view>收货确认?</view>
                    <view>您确定要收货吗?</view>
                    <!-- <u-line class="u-line" color="#E6E6E6"></u-line> -->
                    <view class="btn">
                        <view class="cancel" @click="show = false">取消</view>
                        <view class="ok" @click="submitsh">确定</view>
                    </view>
                </view>
            </u-popup>
        </view>
    </div>
</template>
<script>
import footerPage from "@/components/footer-page/index.vue";
import page from '@/mixins/page'
export default {
    mixins: [page],

    components: {
        footerPage,
    },
    data() {
        return {
            show: false,
            listsz: [{
                name: '全部'
            }, {
                name: '待发货'
            }, {
                name: '待收货',
            },
                {
                    name: '已完成',

                }
            ],
            status: 0,
            lists: [],
            id: '',
            current: 0
        }
    },
    onLoad() {
        this.getList()
    },
    onReachBottom() {
        return
        if (this.lists.length >= this.total) {
            uni.showToast({
                title: '没有数据了哦！',
                icon: 'none',
            })

            return
        }
        this.page++
        this.getList()
    },
    methods: {
        change(index) {
            this.current = index
            this.page = 1
            this.lists = []
            this.getList()
        },
        qrsh(item) {
            this.id = item.id
            this.show = true
        },
        submitsh() {
            this.$api
                .qrsh({
                    id: this.id
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showToast({
                            title: '已确认'
                        })
                        this.show = false
                        this.getList()
                    } else {
                        uni.showToast({
                            title: res.reason,
                            icon: 'none'
                        })
                    }
                });

        },
        godetail(item) {
            console.log(item)
            uni.navigateTo({
                url: `/pages/member/dhddDetails?id=${item.id}`
            })
        },
        getList(isRefresh = true) {
            this.$api
                .dhddlist({
                    status: this.current,
                    page: this.page,
                    pagesize: this.pagesize
                })
                .then((res) => {
                    this.lists = res.result.data
                    this.pageTotal = res.result.pageTotal
                    this.pageSize = res.result.pageSize
                });
        },
    }
}
</script>

<style scoped lang="scss">
.dhdd {
    padding-bottom: 230rpx;
    .box_popup {
        width: 662upx;
        text-align: center;

        & view:nth-child(1) {
            margin-top: 32upx;
            color: #333;
            font-size: 32upx;
            font-family: PingFang SC;
            font-weight: 500;
        }

        & view:nth-child(2) {
            margin-top: 38upx;
            color: #999;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .btn {
            display: flex;
            margin-top: 108upx;

            view {
                width: 50%;
                border-top: 2upx solid #e6e6e6;
                opacity: 1;
                text-align: center;
                line-height: 100upx;
            }

            .cancel {
                border-right: 2upx solid #e6e6e6;
                color: #999999;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }

            .ok {
                color: #007aff;
                margin-top: 32upx;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
        }
    }

    .content {
        .list {
            background-color: #fff;
            margin-top: 20upx;
            .top {
                display: flex;
                justify-content: space-between;
                padding: 20rpx;
                border-bottom: 1px solid #eee;

                .r {
                    color: #F25353;
                }
            }

            .middle {
                display: flex;
                padding: 20rpx;
                border-bottom: 1px solid #eee;
                .img_left {
                    display: flex;

                    .nn {
                        margin-left: 40upx;

                        .num {
                            margin-top: 130upx;
                        }
                    }

                    img {
                        width: 200upx;
                        height: 200upx;
                    }
                }
                .middle_right {
                    margin-left: 20rpx;
                    .good-name {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #333;
                        line-height: 46rpx;
                    }
                    .user-box {
                        display: flex;
                        align-items: center;
                        .username {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: #666;
                            line-height: 42rpx;
                        }
                        .user-tag {
                            margin-left: 20rpx;
                            background-color: #fc4141;
                            height: 36rpx;
                            border-radius: 18rpx;
                            font-size: 26rpx;
                            font-weight: 400;
                            color: #fff;
                            line-height: 40rpx;
                            text-align: center;
                            width: 96rpx;
                        }

                    }
                    .useraddress {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #999;
                        line-height: 42rpx;
                    }

                }
            }

            .address {
                color: #BF9E9E;
            }

            .but {
                display: flex;
                justify-content: space-between;
                margin-top: 20upx;

                .r {
                    background-color: #F25353;
                    color: #fff;
                    padding: 10upx 20upx;
                    border-radius: 20upx;
                }
            }

            .bottom {
                padding: 20rpx;
                .bottom-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #999;
                }
                .red {
                    color: #fc4141;
                }
            }
        }
    }
}
</style>
